<template>
  <d2-container>
    <div class="mt-3 ml-2">
      <el-form :model="form" label-width="120px">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基础设置" name="first">
            <div class="mt-3" style="width: 200px;">
              <el-form-item label="每日广告数量" prop="adv_num">
                <el-input v-model="form.adv_num" />
              </el-form-item>
            </div>
            <div class="row-ac mt-2" style="width: 240px;">
              <el-form-item label="广告时间间隔" prop="interval_time">
                <el-input v-model="form.interval_time" />
              </el-form-item>
              <div class="font-s-2 text-muted ml-2">秒</div>
            </div>
            <div class="mt-2">
              <el-form-item :label="form.is_rewards == false ? '开启广告奖励' : '关闭广告奖励'" prop="is_rewards">
                <el-switch v-model="form.is_rewards"></el-switch>
              </el-form-item>
            </div>
            <div class="row-ac mt-2" v-if="form.is_rewards == true">
              <div class="font-s-2 ml-2" style="width: 80px;">看广告奖励</div>
              <div style="width: 80px;">
                <el-input v-model="form.current_rewards_start" />
              </div>
              <div class="mx-1">—</div>
              <div style="width: 80px;">
                <el-input v-model="form.current_rewards_end" />
              </div>
            </div>
            <div class="mt-2">
              <el-form-item :label="form.is_articlelikes == false ? '开启点赞奖励' : '关闭点赞奖励'" prop="is_articlelikes">
                <el-switch v-model="form.is_articlelikes"></el-switch>
              </el-form-item>
            </div>
            <div class="row-ac mt-2" v-if="form.is_articlelikes == true">
              <div class="font-s-2 ml-2" style="width: 80px;">奖励范围</div>
              <div style="width: 80px;">
                <el-input v-model="form.likes_coin_start" />
              </div>
              <div class="mx-1">—</div>
              <div style="width: 80px;">
                <el-input v-model="form.likes_coin_end" />
              </div>
            </div>
            <div class="mt-2">
              <el-form-item :label="form.is_collect == false ? '开启评论奖励' : '关闭评论奖励'" prop="is_collect">
                <el-switch v-model="form.is_collect"></el-switch>
              </el-form-item>
            </div>
            <div class="row-ac mt-2" v-if="form.is_collect == true">
              <div class="font-s-2 ml-2" style="width: 80px;">奖励范围</div>
              <div style="width: 80px;">
                <el-input v-model="form.collect_coin_start" />
              </div>
              <div class="mx-1">—</div>
              <div style="width: 80px;">
                <el-input v-model="form.collect_coin_end" />
              </div>
            </div>
            <div class="mt-2">
              <el-form-item :label="form.is_release == false ? '开启发贴奖励' : '关闭发贴奖励'" prop="is_release">
                <el-switch v-model="form.is_release"></el-switch>
              </el-form-item>
            </div>
            <div class="row-ac mt-2" v-if="form.is_release == true">
              <div class="font-s-2 ml-2" style="width: 80px;">奖励范围</div>
              <div style="width: 80px;">
                <el-input v-model="form.release_coin_start" />
              </div>
              <div class="mx-1">—</div>
              <div style="width: 80px;">
                <el-input v-model="form.release_coin_end" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="分销模式" name="distribution">
            <div class="mt-3">
              <el-form-item :label="form.is_distribution == false ? '开启分销模式' : '关闭分销模式'" prop="is_distribution">
                <el-switch v-model="form.is_distribution"></el-switch>
              </el-form-item>
            </div>
            <div class="row-ac mt-2" v-if="form.is_distribution">
              <div class="font-s-2 ml-2" style="width: 80px;">上级奖励</div>
              <div style="width: 80px;">
                <el-input v-model="form.superiors_rewards_start" />
              </div>
              <div class="mx-1">—</div>
              <div style="width: 80px;">
                <el-input v-model="form.superiors_rewards_end" />
              </div>
            </div>
            <div class="mt-2" v-if="form.is_distribution">
              <el-form-item :label="form.two_level == false ? '开启二级模式' : '关闭二级模式'" prop="two_level">
                <el-switch v-model="form.two_level"></el-switch>
              </el-form-item>
            </div>
            <div class="row-ac mt-2" v-if="form.two_level">
              <div class="font-s-2 ml-2" style="width: 80px;">末级奖励</div>
              <div style="width: 80px;">
                <el-input v-model="form.final_rewards_start" />
              </div>
              <div class="mx-1">—</div>
              <div style="width: 80px;">
                <el-input v-model="form.final_rewards_end" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="创始人须知" name="agreement">
            <div class="mt-3" style="width: 80%;height: 500px;">
              <el-form-item prop="income_method">
                <d2-quill v-model="form.income_method" />
              </el-form-item>
            </div>
          </el-tab-pane>
          <div class="flex-1 row" style="width: 80%;margin-top: 135px;">
            <el-form-item>
              <el-button type="primary" @click="submitForm">保存</el-button>
            </el-form-item>
          </div>
        </el-tabs>
      </el-form>
    </div>
  </d2-container>
</template>

<script>
  import {
    onlinesetListUrl,
    onlinesetDetailUrl,
    onlinesetCreateUrl,
    onlinesetUpdateUrl,
    imagesUploadUrl
  } from '@/utils/interface'
  import {
    baseURL
  } from '@/utils/request'
  import util from '@/libs/util'
  import d2Quill from '@/components/d2-quill'
  export default {
    components: {
      d2Quill
    },
    data() {
      return {
        onlinesetList: [],
        onlinesetDetail: '',
        activeName: 'first',
        form: {
          adv_num: 0,
          interval_time: 0,
          is_articlelikes: false,
          likes_coin_start: 0,
          likes_coin_end: 0,
          is_collect: false,
          collect_coin_start: 0,
          collect_coin_end: 0,
          is_release: false,
          release_coin_start: 0,
          release_coin_end: 0,
          income_method: '',
          is_distribution: false,
          two_level: false,
          current_rewards_start: 0,
          current_rewards_end: 0,
          superiors_rewards_start: 0,
          superiors_rewards_end: 0,
          final_rewards_start: 0,
          final_rewards_end: 0
        },
        onlinesetId: ''
      }
    },
    mounted() {
      this.getOnlinesetList()
      this.headersobj = {
        Authorization: 'Bearer ' + util.cookies.get('token')
      }
    },
    methods: {
      getOnlinesetList() {
        this.$get(onlinesetListUrl).then(res => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            this.onlinesetList = res.data.data.list
            console.log('列表', this.onlinesetList);
            if (this.onlinesetList.length > 0) {
              this.onlinesetDetail = this.onlinesetList[0]
              this.onlinesetId = this.onlinesetDetail.id
              this.form = {
                adv_num: this.onlinesetDetail.adv_num,
                interval_time: this.onlinesetDetail.interval_time,
                is_articlelikes: this.onlinesetDetail.is_articlelikes,
                likes_coin_start: this.onlinesetDetail.likes_coin_start,
                likes_coin_end: this.onlinesetDetail.likes_coin_end,
                is_collect: this.onlinesetDetail.is_collect,
                collect_coin_start: this.onlinesetDetail.collect_coin_start,
                collect_coin_end: this.onlinesetDetail.collect_coin_end,
                is_release: this.onlinesetDetail.is_release,
                release_coin_start: this.onlinesetDetail.release_coin_start,
                release_coin_end: this.onlinesetDetail.release_coin_end,
                income_method: this.onlinesetDetail.income_method,
                is_distribution: this.onlinesetDetail.is_distribution,
                two_level: this.onlinesetDetail.two_level,
                current_rewards_start: this.onlinesetDetail.current_rewards_start,
                current_rewards_end: this.onlinesetDetail.current_rewards_end,
                superiors_rewards_start: this.onlinesetDetail.superiors_rewards_start,
                superiors_rewards_end: this.onlinesetDetail.superiors_rewards_end,
                final_rewards_start: this.onlinesetDetail.final_rewards_start,
                final_rewards_end: this.onlinesetDetail.final_rewards_end
              }
              console.log('详情', this.form);
            }
          }
        })
      },
      submitForm() {
        if (this.onlinesetList.length == 0) {
          this.$post(onlinesetCreateUrl, this.form).then(res => {
            if (res.data.code == 200) {
              this.$message.success('修改成功')
            }
          })
        } else {
          this.$put(onlinesetUpdateUrl + this.onlinesetId + '/', this.form).then(res => {
            if (res.data.code == 200) {
              this.$message.success('修改成功')
            }
          })
        }
      }
    }
  }
</script>

<style>
</style>
